<template lang="">
  <div class="list">
    <div class="item" v-for="item in items" :key="item.id">
      <div class="item-l"><img :src="item.src" alt=""></div>
    

      <div class="item-r">
        <div class="item-title">{{item.title}}</div>
        <div class="item-price">{{item.price | currency}}</div>
        <div class="item-option">
          <button @click="del(item)">删除</button>
        </div>
      </div>
    </div>

    <div class="item-total" v-if="items.length">
      商品总价: {{total | currency}}
    </div>
    <div class="item-empty" v-else>购物车中暂无商品</div>
  </div>
</template>
<script>
import {mapGetters,mapState, mapActions} from 'vuex'
export default {
  name: 'Shopcart',
  methods: mapActions('shopcart', ['del']),
  computed: {
    // ...在es6中是对象结构
    ...mapState({
      items:state => state.shopcart.items
    }),
    ...mapGetters('shopcart', {total: 'totalPrice'})
  },
  filters: {
    currency(value) {
      return ' ¥ ' + value;
    }
  }
}
</script>
<style lang="">
  .item {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px dashed #eee;
  }
  .item-l {
    flex: 1;
  }
  .item-l > img {
    margin-left: 10px;
  }
  .item-r {
    flex: 1;
  }
  .item-title {
    font-weight: 800;
  }
  .item-price {
    margin-top: 10px;
    color: red;
  }
  .item-option > button {
    background-color: red;
    color: white;
    border-radius: 5px;
    border: 0;
    margin-top: 10px;
  }
</style>